<template>
	<div class="system-role_list-container layout-padding">

		<el-card shadow="hover" class="layout-padding-auto">
			<el-table size="default" :data="state.dataList" style="width: 100%">

				<el-table-column label="ID" prop="id" width="150"></el-table-column>
				<el-table-column prop="name" label="等级名称" align="center">
					<template #default="scope">
						{{ scope.row.name }}
					</template>
				</el-table-column>
				<el-table-column prop="airdropRewardRadio" label="空投助力奖励比例" align="center">
					<template #default="scope">
						{{ scope.row.airdropRewardRadio | numberFormat }}%
					</template>
				</el-table-column>
				<el-table-column prop="childCount" label="推荐好友数量" align="center">
					<template #default="scope">
						{{ scope.row.childCount }}
					</template>
				</el-table-column>
				<el-table-column prop="createTime" label="创建时间" align="center">
					<template #default="scope">
						{{ scope.row.createTime | dateFormat }}
					</template>
				</el-table-column>
				<el-table-column prop="icoRewardRadio" label="认筹奖励比例" align="center">
					<template #default="scope">
						{{ scope.row.icoRewardRadio | numberFormat }}%
					</template>
				</el-table-column>
				<el-table-column prop="id" label="ID" align="center">
					<template #default="scope">
						{{ scope.row.id }}
					</template>
				</el-table-column>
				<el-table-column prop="teamAirdropAmount" label="团队空投助力金额" align="center">
					<template #default="scope">
						$ {{ scope.row.teamAirdropAmount | currency }}
					</template>
				</el-table-column>

				<el-table-column prop="teamAirdropChild" label="团队空投助力人数" align="center">
					<template #default="scope">
						{{ scope.row.teamAirdropChild }}
					</template>
				</el-table-column>

				<el-table-column prop="teamIcoAmount" label="团队认筹金额" align="center">
					<template #default="scope">
						$ {{ scope.row.teamIcoAmount | currency }}
					</template>
				</el-table-column>

				<el-table-column prop="teamIcoChild" label="团队认筹人数" align="center">
					<template #default="scope">
						{{ scope.row.teamIcoChild }}
					</template>
				</el-table-column>

				<!-- <el-table-column prop="updateTime" label="修改时间" align="center">
					<template #default="scope">
						{{ scope.row.updateTime | dateFormat }}
					</template>
				</el-table-column> -->






				<el-table-column align="center" label="操作" width="200">
					<template #default="scope">
						<el-button type="primary" size="small" @click="handlerEdit(scope.$index, scope.row)">
							编辑
						</el-button>
					</template>
				</el-table-column>







			</el-table>
		</el-card>

		<editdialog ref="editdialogRef" @refresh="refresh" />


	</div>
</template>

<script setup lang="ts" name="systemMenu">


import { formatDate } from '/@/utils/formatTime';
import { onMounted, reactive, defineAsyncComponent, ref } from 'vue';


import { useGatherApi } from '/@/api/gather/index';





const editdialog = defineAsyncComponent(() => import('./editdialog.vue'));
const editdialogRef = ref();

const state = reactive({
	dataList: [] as any
});




const handlerEdit = (index: any, row: any) => {
	editdialogRef.value.openDialog("edit", row);
}




const refresh = () => {
	getLevelConfig();
}



const getLevelConfig = async () => {
	let tempList = await useGatherApi().getLevelList();
	state.dataList = tempList;
}


// 页面加载时
onMounted(() => {
	getLevelConfig();
});



</script>




<style scoped lang="scss">
.el-form .el-form-item:last-of-type {
	margin-bottom: 22px !important;
}

.bar_tools {
	display: flex;
	flex-direction: row-reverse;
	margin-bottom: 10px;
}


.system-role_list-container {
	:deep(.el-card__body) {
		display: flex;
		flex-direction: column;
		flex: 1;
		overflow: auto;

		.el-table {
			flex: 1;
		}
	}
}

.bar_btn_div {
	display: flex;
	padding: 20px;
	border: 1px solid #ebeef5;
	align-items: center;
	justify-content: space-between;
	border-radius: 5px 5px 0px 0px;

	.title_div {
		display: flex;
		font-size: 16px;

		&>div {
			margin-right: 10px;
		}
	}
}

.search_div {
	border: 1px solid #ebeef5;
	border-top: 0px;
	border-radius: 0px 0px 5px 5px;
	padding: 20px;
	padding-bottom: 0px;
}
</style>
